<template>
  <div class="manage-warp">

    <div class="manage-box" v-if="showPage == 1" ref="wrapper">
      <div class="manage-list">
        <div class="manage-con" v-for="(item,index) in manageList" v-if="manageList.length" :key="index">
          <div class="content-box1">
            <span class="title1">招聘岗位：{{item.workTypeName}}</span>
            <div class="status-box">
              <img :src="item.status == 0?require('./state_ing.png'):require('./state_end.png')" class="pic1"
                   onclick="return false"/>
              <span class="status" :class="{'status2':item.status == 0,'status1':item.status == 1}">{{item.status == 0?"招聘中":"待招聘"}}</span>
            </div>
          </div>

          <div class="content-box2">
            <span class="title2">工种：{{item.postType == 0?"正式工":"小时工"}}</span>
            <span class="title2">招聘人数：{{item.maxNumber}}人</span>
            <div class="edit-box">
              <button type="button" class="edit" @click="editWork(item.id)">编辑</button>
            </div>
          </div>

          <div class="content-box3">面试时间：{{item.interviewTime}}</div>

          <div class="content-box4">
            <img :src="item.mechanismLogo == ''?require('./logo.png'):item.mechanismLogo" class="pic2"
                 onclick="return false"/>
            <span class="title3">{{item.mechanismName}}</span>
          </div>
        </div>
        <div class="more-box" v-if="this.noMoreData">没有更多了~</div>
      </div>
    </div>


    <empty title="抱歉,未找到相关内容~" v-if="showPage == 2"></empty>

    <backpage @backPage="backPage"></backpage>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import empty from "../../../components/errorpage"
  import BScroll from 'better-scroll'
  import {getDeviceRatio} from "../../../config/util"
  import backpage from "../../../components/backpage"

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        showPage: 0,
        id: "",
        userSign: "",
        manageList: [],
        manageScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryWorkList();
    },
    methods: {
      queryWorkList() {
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_work_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_work_list?sgin=" + this.userSign + "&id=" + this.id + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data.length > 0 && resultObj.data != null) {
              this.showPage = 1;
              this.manageList = resultObj.data;
              this.$nextTick(() => {
                this.initScroll();
                this.manageScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.manageScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {//没有数据
              this.showPage = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/query_work_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/query_work_list?sgin=" + this.userSign + "&id=" + this.id + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.manageList = this.manageList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.manageScroll) {
          this.manageScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.manageScroll.refresh();
        }
      },
      enable() {
        this.manageScroll && this.manageScroll.enable()
      },
      refresh() {
        this.manageScroll && this.manageScroll.refresh()
      },
      finishPullUp() {
        this.manageScroll && this.manageScroll.finishPullUp()
      },
      editWork(id) {//编写
        sessionStorage.removeItem("work");
        this.$router.push({path: "/workedit", query: {"id": id}});
      },
      backPage(){
        this.$router.push({path:"/residentIndex"});
      }
    },
    watch: {
      manageList() {
        this.$nextTick(() => {
          this.manageScroll.refresh();
        })
      }
    },
    components: {
      BScroll,
      empty,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .manage-warp
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    .manage-box
      display: flex
      flex-direction: column
      position: fixed
      top: 0
      bottom: 0
      wh(100%, auto)
      overflow: hidden
      .manage-list
        .manage-con
          margin-bottom: 0.267rem
          wh(100%, 4rem)
          background: rgba(255, 255, 255, 1)
          .content-box1
            display: flex
            padding-top: 0.507rem
            margin-left: 3.33%
            margin-bottom: 0.2rem
            .title1
              size-color(0.453rem, rgba(51, 51, 51, 1))
              font-weight: 500
            .status-box
              display: flex
              align-items: center
              margin-left: 0.533rem
              .pic1
                wh(0.427rem, 0.427rem)
              .status
                font-size: 0.4rem
                font-weight: 500
                margin-left: 0.16rem
              .status1
                color: rgba(255, 187, 76, 1)
              .status2
                color: $color

          .content-box2
            display: flex
            align-items: center
            height: 0.8rem
            margin-left: 3.33%
            margin-bottom: 0.04rem
            .title2
              size-color(0.4rem, rgba(102, 102, 102, 1))
              &:nth-child(2)
                margin-left: 0.653rem
            .edit-box
              margin-left: auto
              margin-right: 0.32rem
              .edit
                wh(1.6rem, 0.8rem)
                border: 0.027rem solid rgba(60, 175, 255, 1)
                border-radius(0.16rem)
                size-color(0.4rem, rgba(60, 175, 255, 1))
                background: #FFF
          .content-box3
            margin-bottom: 0.427rem
            margin-left: 3.33%
            size-color(0.4rem, rgba(102, 102, 102, 1))
          .content-box4
            display: flex
            align-items: center
            margin: 0 auto
            wh(93.6%, 1.173rem)
            border-top: 0.027rem solid rgba(242, 242, 242, 1)
            .pic2
              wh(0.96rem, 0.96rem)
              box-sizing: border-box
              border: 1px solid rgba(224, 224, 224, 1)
              border-radius: (0.16rem)
            .title3
              margin-left: 0.427rem
              size-color(0.373rem, rgba(153, 153, 153, 1))

        .more-box
          text-align: center
          margin-top: 0.48rem
          padding-bottom: 0.64rem
          size-color(0.347rem, rgba(153, 153, 153, 1))
</style>
